<template>
  <a-drawer
    :title="title"
    :maskClosable="true"
    :width="drawerWidth"
    placement="right"
    :closable="true"
    @close="handleCancel"
    :visible="visible"
    style="height: 100%"
  >
    <a-spin :spinning="confirmLoading">
      <j-form-container :disabled="formDisabled">
        <!-- 主表单区域 -->
        <a-form-model ref="form" :label-col="labelCol" :wrapper-col="wrapperCol" :model="model" slot="detail">
          <a-row class="form-row" :gutter="16">
            <a-col :lg="8">
              <a-form-model-item label="算法名称" prop="formulaName">
                {{ model.formulaName }}
              </a-form-model-item>
            </a-col>
            <a-col :lg="12">
              <a-form-model-item label="备注" prop="remark">
                {{ model.remark }}
              </a-form-model-item>
            </a-col>
          </a-row>

          <!-- <a-col :span="12" >
            <a-form-model-item label="序号" :labelCol="labelCol" :wrapperCol="wrapperCol" prop="seqNo">
              <a-input-number v-model="model.seqNo" placeholder="请输入序号" style="width: 100%" />
            </a-form-model-item>
          </a-col> -->
          <a-row class="form-row" :gutter="16">
            <a-col :lg="24">
              <a-form-model-item
                label="内容"
                v-if="isEdit"
                prop="formulaContentHtml"
                :labelCol="{ lg: { span: 2 }, sm: { span: 3 } }"
                :wrapperCol="{ lg: { span: 17 }, sm: { span: 17 } }"
              >
                <w-textarea
                  ref="wText"
                  tag="wise"
                  v-model="model.formulaContentHtml"
                  :tools="[]"
                  style="font-size: 22px"
                />
                 <a-textarea v-model="model.formulaContent" rows="2"  readonly="readonly" placeholder="请输入内容" />
              </a-form-model-item>
            </a-col>
          </a-row>
        </a-form-model>
      </j-form-container>
      <!-- 子表单区域 -->
      <a-row :gutter="24">
        <a-col :span="14">
          <user-formula-detail
            :ref="refKeys[0]"
            :formulaId="formulaId"
            @refreshFormulaContent="refreshFormulaContent"
          />
        </a-col>
        <a-col :span="10">
          <user-formula-portion :ref="refKeys[1]" :formulaId="formulaId" />
        </a-col>
      </a-row>
    </a-spin>
  </a-drawer>
</template>

<script>
import { getAction, postAction } from '@/api/manage'
import { JVxeTableModelMixin } from '@/mixins/JVxeTableModelMixin.js'
import { JVXETypes } from '@/components/jeecg/JVxeTable'
import { getRefPromise, VALIDATE_FAILED } from '@/components/jeecg/JVxeTable/utils/vxeUtils.js'
import JFormContainer from '@/components/jeecg/JFormContainer'
import UserFormulaDetail from './detail/UserFormulaDetailView'
import UserFormulaPortion from './detail/UserFormulaPortionView'
import FooterToolBar from '@/components/tools/FooterToolBar'
import { duplicateCheck } from '@/api/api'
export default {
  name: 'UserFormulaForm',
  mixins: [JVxeTableModelMixin],
  components: {
    JFormContainer,
    UserFormulaDetail,
    UserFormulaPortion,
    FooterToolBar,
  },
  data() {
    return {
      title: '算法',
      formulaId: this.$route.params.formulaId,
      labelCol: {
        xs: { span: 24 },
        sm: { span: 6 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 16 },
      },
      model: {
        formulaName: '',
        remark: '',
        formulaContent: '',
        formulaContentHtml: '',
      },
      insertFunVisible: false,
      funConfirmLoading: false,
      addFunText: '',
      searchOptions: [],
      loading: false,
      // 新增时子表默认添加几行空数据
      addDefaultRowNum: 1,
      isEdit: false, //是否编辑
      refKeys: ['userFormulaDetail', 'userFormulaPortion'],
      tableKeys: ['userFormulaDetail', 'userFormulaPortion'],
      activeKey: 'userFormulaDetail',
      // 引用函数
      userFormulaDetailTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '函数ID',
            key: 'funId',
            type: JVXETypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '函数类型',
            key: 'funType',
            type: JVXETypes.select,
            options: [],
            dictCode: 'fun_type',
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '函数参数',
            key: 'funPara',
            type: JVXETypes.textarea,
            width: '350px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
        ],
      },
      // 运行结果区间设置
      userFormulaPortionTable: {
        loading: false,
        dataSource: [],
        columns: [
          {
            title: '区间',
            key: 'portionSet',
            type: JVXETypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '参考值，即落入某区间视同获得此值',
            key: 'refValue',
            type: JVXETypes.input,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
          {
            title: '备注',
            key: 'portionRemark',
            type: JVXETypes.textarea,
            width: '200px',
            placeholder: '请输入${title}',
            defaultValue: '',
            validateRules: [{ required: true, message: '${title}不能为空' }],
          },
        ],
      },
      url: {
        add: '/userFormula/userFormula/add',
        edit: '/userFormula/userFormula/edit',
        queryById: '/userFormula/userFormula/queryById',
        userFormulaDetail: {
          list: '/userFormula/userFormula/queryUserFormulaDetailByMainId',
        },
        userFormulaPortion: {
          list: '/userFormula/userFormula/queryUserFormulaPortionByMainId',
        },
      },
      visible: false,
      drawerWidth: '80%',
    }
  },
  computed: {
    formDisabled() {
      return this.disabled
    },
  },
  created() {},
  methods: {
    // 根据屏幕变化,设置抽屉尺寸
    resetScreenSize() {
      let screenWidth = document.body.clientWidth
      if (screenWidth < 300) {
        this.drawerWidth = screenWidth
      } else {
        this.drawerWidth = 500
      }
    },
    show(formulaId) {
      this.visible = true
      this.formulaId = formulaId
      this.loadData()
    },   
    refreshFormulaContent(funText) {
      this.$refs.wText.addTag(funText)
    },
    loadData() {
      this.title = '算法明细'
      if (this.formulaId && this.formulaId > 0) {
        this.isEdit = true
        let params = { id: this.formulaId }
        getAction(this.url.queryById, params).then((res) => {
          if (res.success) {
            this.model = res.result
            this.title = "算法明细 - 【 " +this.model.formulaName+ " 】";
          }
        })
      } else {
        this.isEdit = false
        this.model.formulaName = ''
        this.model.remark = ''
        this.model.formulaContent = ''
        this.model.formulaContentHtml = ''
      }
    }
  },
}
</script> 